<template>
	<view class="window">
        <!-- 导航栏 -->
        <navigationBar :backStatus="false"></navigationBar>

        <view class="title_box">
            <view class="title_date">
                {{ getDate }}
                <view class="title_time" v-if="nowDateTime.hour">
                    {{ nowDateTime.hour }} 
                    <span class="colon">
                        <text v-show="showColon">:</text>
                    </span>
                    {{ nowDateTime.minute }} 
                </view>
            </view>
            <view class="title_week">
                <!-- 动画 -->
                <animationCom/>
                {{ getWeek }}
            </view>
        </view>
        <view class="table_box">

            <!-- 时间段 -->
            <view class="tableTime_box">
                <view class="table_title">{{ nowDateTime.month }}月</view>

                <view class="time_stage">
                    <!-- 进度条 -->
                    <view class="progress_box">
                        <view class="active_progress" :style="{height: progressItem }"></view>
                    </view>

                    <view class="table_time" v-for="(item, index) in classTimeList" :key="index" :class="{'active': item.active}">
                        <view class="time_index">{{ index + 1 }}</view>
                        <view class="begin_time">{{ item.beginTime }}</view>
                        <view class="end_time">{{ item.endTime }}</view>
                    </view>
                </view>
            </view>

            <!-- 表内容 -->
            <view class="table_content" ref="table_content_box">
                <view class="table_head">
                    <view class="head_item" :class="{'active_head': index + 1 == nowWeek}" v-for="item,index in classTableData">{{ item.week }}</view>
                </view>

                <view class="table_body">
                    <view class="table_column" :class="{'active_column': index + 1 == nowWeek}" v-for="(week_item, index) in classTableData" :key="week_item.week" >
                        <view 
                            class="table_item" v-for="(item, classIndex) in week_item.data" 
                            :key="classIndex"
                            @click="handleTableItem(item, classIndex, index)"
                        >
                            <view class="item_label" v-if="getClassroomItem(item.classroom).name"
                                :style="{
                                    backgroundColor: getClassroomItem(item.classroom).bgColor,
                                    // color: getClassroomItem(item.classroom).bgColor
                                }"
                            >
                                {{ getClassroomItem(item.classroom).name }}
                            </view>
                            <view class="course" v-if="item.title">
                                ({{ item.title }})
                            </view>
                        </view>

                    </view>
                </view>
            </view>
        </view> 

        <view class="bottom_box"  :style="{ height: tabBarHeight + 'px'}" ></view>
	</view>
</template>

<script>
    import navigationBar from '../../components/navigationBar/navigationBar.vue';
    import animationCom from '../../components/animationCom/animationCom.vue';
    import { timeList, classroomList, tableData } from '../../public/classInfo';

	export default {
        components: {
            navigationBar,
            animationCom
        },
		data() {
			return {
			    tabBarHeight: this.$bus.tabBarHeight,
                // 当前时间
                nowDateTime: { 
                    month: new Date().getMonth() + 1,
                    hour: new Date().getHours(),
                    minute: this.$util.formatNumber(new Date().getMinutes()),
                },  
                showColon: true, // 显示冒号
                classTimeList:[], // 课程时间
                classTableData:[],  // 表格数据
                progressItem: 0,  // 进度条百分比
                nowWeek: '', // 当前周几
                timePeriodObj: {// 时间段对象 
                    beginTime: '08:20',
                    endTime: '16:10',
                },  

                privateClassroomList:[] // 班级列表
			}
		},
		onLoad() {
            // 课程时间  timeList
            let timeListData = uni.getStorageSync('timeList')
            this.classTimeList = timeListData ? timeListData : timeList

            let tableDataData = uni.getStorageSync("tableData")
            this.classTableData = tableDataData ? tableDataData : tableData

            this.circulationHandleTime()
            console.log('this.$util', this.$util?.formatTime(new Date()));
		},
        async onShow() {
            await this.updatePageData() // 更新页面数据
            this.cyclingTime()  // 循环获取当前时间
            this.handleTime() // 处理时间段 所处位置
            this.updateWeekShow() // 更新周几
        },
        onHide(){
            clearInterval(this.getTimeDate)// 清除定时器
        },
        computed: {
            getDate() {
                return this.$util.formatTimeTwo(new Date().getTime(), 'Y/M/D')
            },
            getWeek() {
                return this.$util.getWeek(new Date())
            }
        },
        watch: {
            nowWeek: {
                handler(newVal, oldVal) {
                    // console.log('nowWeek - newVal',newVal);
                    let table_content_box = document.querySelector('.table_content');

                    if(table_content_box && newVal >= 3){
                        table_content_box.scrollLeft = table_content_box.scrollWidth
                    }
                },
                deep: false
            }
        },
		methods: {
            updatePageData(){
                return new Promise((resolve) => {
                    // 课程时间  timeList
                    let timeListData = uni.getStorageSync('timeList')
                    this.classTimeList = timeListData ? timeListData : timeList

                    let tableDataData = uni.getStorageSync("tableData")
                    this.classTableData = tableDataData ? tableDataData : tableData
                    if (!tableDataData) uni.setStorageSync("tableData", this.classTableData)
                    
                    // 班级列表
                    let classroomListData = uni.getStorageSync("classroomList")
                    this.privateClassroomList = classroomListData ? classroomListData : classroomList
                    if (!classroomListData) uni.setStorageSync("classroomList", this.privateClassroomList)
                    resolve()
                })
            },
            // 循环处理 handleTime 方法
            circulationHandleTime(){
                this.handleTime()
                setTimeout(()=> { this.circulationHandleTime() }, 1000 * 60)
            },
            // 处理滑块位置
            handleTime(){
                if(this.classTimeList.length === 0) return;
                let nowDay = new Date().toLocaleDateString() // 今天日期
                let beginTime = nowDay + ' ' + this.classTimeList[0].beginTime
                let endTime = nowDay + ' ' + this.classTimeList[this.classTimeList.length - 1].endTime


                let beginTimeTimestamp = new Date(beginTime).getTime() // 开始时间戳
                let endTimeTimestamp = new Date(endTime).getTime() // 结束时间戳
                
                let totalTime = ((endTimeTimestamp - beginTimeTimestamp) / 1000 / 3600) // 总时间
                let nowTimestamp = new Date().getTime() // 当前时间戳

                // 处于时间段内
                if(beginTimeTimestamp <= nowTimestamp && nowTimestamp <= endTimeTimestamp){
                    let pastTime = ((nowTimestamp - beginTimeTimestamp) / 1000 / 3600)
                    let timePercentage = pastTime / totalTime * 100 // 百分比
                    this.progressItem = timePercentage + '%'

                    // 计算当前时间段
                    this.updateNowTimeStage(nowDay, nowTimestamp)

                }else if(beginTimeTimestamp > nowTimestamp){
                    this.progressItem = 0
                }else if(nowTimestamp > endTimeTimestamp){
                    this.progressItem = '100%'  //top calc(100% - 30rpx)
                }

                this.updateWeekShow() // 更新周几
            },

            // 更新周几 
            updateWeekShow(){
                // 当前周几
                if(this.nowWeek == '' || this.nowWeek != new Date().getDay()){
                    console.log('当前周几与记录不符',this.nowWeek);
                    // 工作日
                    if(this.nowWeek >= 1 && this.nowWeek <= 5){
                        this.nowWeek = new Date().getDay()
                        // this.classTableData.map(item => {
                        //     if(item.active) item.active = false;
                        // })
                        // this.classTableData[this.nowWeek - 1].active = true;
                    }else{
                        this.nowWeek = 5 //用周五表示最后一天
                    }
                }
            },
            // 更新当前时间段 (现通过时间段均匀百分比进行计算)
            updateNowTimeStage(nowDay, nowTimestamp){
                // 判断当前处在哪个时间段内
                this.classTimeList.map(item => {
                    if(this.$util.isDuringDate(nowDay + ' ' + item.beginTime, nowDay + ' ' + item.endTime)){
                        item.active = true;
                    }else{
                        if(item.active) item.active = false;
                    }
                })

                let activeTime = this.classTimeList.findIndex(item => item.active)
                if(activeTime !== -1) {
                    let stageHeight = 100 / this.classTimeList.length * activeTime; // 时间段高度
                    let activeTimeItem = this.classTimeList[activeTime] // 当前时间段对象
                    // 计算当前滑块超出多少距离 beginTime endTime
                    let stageBegin = nowDay + ' ' + activeTimeItem.beginTime
                    let stageEnd = nowDay + ' ' + activeTimeItem.endTime
                    let percentage = (nowTimestamp - new Date(stageBegin).getTime()) / (new Date(stageEnd).getTime() - new Date(stageBegin).getTime())  // 百分比
                    // 计算当前滑块位置
                    this.progressItem = stageHeight + ((100 / this.classTimeList.length) * percentage) + '%'
                }else{
                    let activeTimeIndex = this.classTimeList.findIndex((item,index) => {
                        if(!this.classTimeList[index + 1]) return false; // 最后一个时间段
                        let stageEnd = nowDay + ' ' + item.endTime  // 当前时间段结束时间
                        let nextBeginTime = nowDay + ' ' + this.classTimeList[index + 1].beginTime  // 下个时间段开始时间

                        return nowTimestamp > new Date(stageEnd).getTime()  && nowTimestamp < new Date(nextBeginTime).getTime()  //在这个时间段之后 和 下个时间段之前 （中间这段）
                    })
                    if(activeTimeIndex !== -1){
                        let stageHeight = 100 / this.classTimeList.length * (activeTimeIndex + 1); // 时间段高度
                        this.progressItem = stageHeight + '%'
                    }
                }
            },


            // 处理色块
            getClassroomItem(classroom){
                if(classroom){
                    let roomItem = this.privateClassroomList.find(item => {
                        return item.classroomId === classroom
                    })
                    return roomItem ? roomItem : {}
                }else{
                    return {}
                }
            },
            // 循环获取当前时间
            cyclingTime(){
                this.getTimeDate = setInterval(()=> {
                    let dateObj = {
                        month: new Date().getMonth() + 1,
                        hour: new Date().getHours(),
                        minute: this.$util.formatNumber(new Date().getMinutes()),
                    }
                    this.nowDateTime = dateObj
                    this.showColon = !this.showColon
                },1000)
            },

            // 处理表格点击
            handleTableItem(item, classIndex, weekIndex){
                console.log('handle --TableItem',item, classIndex, weekIndex);

                let classroom = this.getClassroomItem(item.classroom);

                console.log('classroom',classroom);
                // 跳转到详情页
            }



		}
	}
</script>

<style lang="scss" scoped>
    $themeColor: #70c000;  //#70c000  //#0081ff

    $grayColor: rgba(55, 53, 47, 0.502);
    $tableHeadBgColor: #fff;
    $tableHeadHeight: 100rpx;
    $tableBorderColor: rgba(135, 131, 120, 0.15);
    $noonBreakBorder: 4rpx;
    $shadow: 8rpx;

    page{
        /* 渐变 */
        /* background: linear-gradient(to bottom, #e3f3f87b, #fff); */
        scrollbar-width: 12px;
        scrollbar-color: #D3D1CB rgba(0, 0, 0, 0);
    }
	.window {
        background-color: #f5f5f5;
        width: 100%;
        /* height: 100vh; */
        padding: 0 30rpx;
        padding-top: 30rpx;
        box-sizing: border-box;
        color: #37352f; 
        /* font-family: "Microsoft YaHei", "Arial Narrow", sans-serif; */
        font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
        font-size: 28rpx;
        .title_box{
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            color: $grayColor;
            .title_date{
                .title_time{
                    margin-left: 14rpx;
                    display: inline-block;
                    .colon{
                        /* transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s; */
                        display: inline-block;
                        padding: 0 2rpx;
                        text-align: center;
                        width: 10rpx;
                    }
                }
            }
            

            .title_week{
                position: relative;
            }
        }

        .table_box{
            /* font-size: 36rpx; */
            margin-top:10rpx;
            margin-bottom: 50rpx;
            border: 2rpx solid rgba(0,0,0,0.2);
            /* min-height: 600rpx; */
            border-radius: 6rpx;
            display: flex;
            padding-right: 2rpx;
            box-sizing: border-box;

            .table_title{
                color: $themeColor;
                height: $tableHeadHeight;
                line-height: $tableHeadHeight;
                font-weight: bold;
                font-size: 32rpx;
                background-color: $tableHeadBgColor;
                text-align: center;
                z-index: 2;
            }   
            
            /* 左侧 时间段 box */
            .tableTime_box{
                display: flex;
                flex-direction: column;
                gap: 4rpx;
                z-index: 2;
                position: relative;
                min-width: 120rpx;

                /* 右侧阴影 */
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    right: -$shadow;
                    width: $shadow;
                    height:100%;
                    background: linear-gradient(to right, rgba(135, 131, 120, 0.15), rgba(135, 131, 120, 0.1), transparent);
                }

                /* 时间段 */
                .time_stage{
                    padding-left: 10rpx;
                    padding-right: 4rpx;
                    position: relative;
                    flex: 1;
                    text-align: center;
                    background-color: #f5f5f5;
                    /* 进度条  */
                    .progress_box{
                        position: absolute;
                        /* top: $tableHeadHeight; */
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 10rpx;
                        background: #70c0000c;
                        .active_progress{
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 30rpx;
                            border-radius: 6rpx;
                            background-color: #70c000;

                            /* 动画 */
                            opacity: 1;
	                        animation: progress 2s linear .5s infinite alternate; // 呼吸动画实现
                            overflow: hidden;
                            &::after{
                                display: none;
                                content: "";
                                position: absolute;
                                top: 0;
                                left: -30%;
                                width: 200%;
                                height: 4rpx;
                                transform: rotate(25deg);
                                background-color: #fff;
                                filter: blur(4rpx);
	                            animation: slideBox 2s linear 1s infinite ; // 呼吸动画实现
                            }
                        }
                        @keyframes slideBox {
                            0%   { 
                                top: -50%;
                            }
                            100% { 
                                top: 290%;
                            }
                        }
                        @keyframes progress {
                            0%   { 
                                opacity: 1; 
                            }
                            100% { 
                                opacity: .4; 
                            }
                        }

                    }
                    .table_time{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        gap: 8rpx;
                        padding: 20rpx 10rpx;
                        position: relative;
                        &::after{
                            content: "";
                            position: absolute;
                            bottom: 0;
                            width: 80%;
                            height: 2rpx;
                            background-color: $tableBorderColor;
                        }
                        &:nth-child(5):after{
                            background-color: $themeColor;
                            width: 100%;
                            left: 0;
                            height: $noonBreakBorder;
                            border-radius: 8rpx;
                        }
                        .time_index{
                            font-size: 32rpx;
                            text-align: center;
                            color: $themeColor;
                            margin: 10rpx auto;
                            font-weight: bold;
                        }
                    }
                    .active{
                        background-color: rgba(112, 192, 0, 0.2);
                        &:after{
                            content: "";
                            position: absolute;
                            bottom: 0;
                            right: -4rpx;
                            width: 6rpx;
                            height: 100%;
                            background-color: $themeColor;
                        }
                    }
                }
            }     

            /* 表内容 */
            .table_content{
                flex: 1;
                overflow-x: scroll;
                $table_body_width: 110vw;  // 100%
                /* 表头 */
                .table_head{
                    position: relative;
                    display: flex;
                    align-items: center;
                    background-color: $tableHeadBgColor;
                    height: $tableHeadHeight;
                    color: $grayColor;
                    width:  $table_body_width;

                    .head_item{
                        flex: 1;
                        text-align: center;
                        font-size: 32rpx;
                        font-weight: bold;
                        position: relative;
                        &:after{
                            content: "";
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            /* transform: translateX(-50%); */
                            width: 4rpx;
                            height: 100%;
                            background-color: rgba(0,0,0,0.2);
                            border-radius: 4px;
                        }
                        &:last-child:after{
                            display: none; 
                        }
                    }
                    .active_head{
                        color: $themeColor;
                        &::before{
                            content: "";
                            position: absolute;
                            bottom: -30rpx;
                            right: 0;
                            left: 0;
                            width: 100%;
                            height: 4rpx;
                            background-color: $themeColor;
                        }
                    }
                }
                
                
                /* 表内容 */
                .table_body{
                    display: flex;
                    width:  $table_body_width;
                    background-color: #f5f5f5;
                    height: calc(100% - #{$tableHeadHeight});
                    font-size: 24rpx;
                    .table_column{
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        height: 100%;
                        border-right: 1rpx solid $tableBorderColor;
                        color: rgba(55, 53, 47, 0.702);
                        &:last-child{border-right:none;}
                        .table_item{
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-bottom: 1rpx solid $tableBorderColor;
                            position: relative;
                            flex-direction: column;
                            &:last-child{border-bottom:none;}
                            &:nth-child(4){
                                border-bottom: $noonBreakBorder solid $themeColor;
                            }
                            .item_label{
                                border-radius: 8rpx;
                                padding: 12rpx 20rpx;
                                white-space: nowrap;
                            }
                            .course{margin-top: 8rpx;}
                        }
                    }
                    .active_column{
                        font-weight: bold;
                        &::before{
                            background-color:rgba(112, 192, 0, 0.07);
                            /* background-color: rgba(0,0,0,0.02); */
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 2;
                        }
                    }
                }

            }   
        }

	}
</style>
